<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>分页界面</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
    <style>
        .showData {
            display: none;
        }

        .editData {
            display: none;
        }

        .showAccountType1 {
            display: none;
        }

        .showAccountType2 {
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap-container clearfix showAccountType1">
    <div class="gzh-details-ctn">
        <div class="gzh-menu-top">公众号信息</div>
        <div class="gzh-menu-tip">当您的公众号信息发生变更时，请及时更改当前绑定的公众号信息</div>
        <div class="gzh-list-txt layui-form">
            <div class="div-input-blcok">
                <div class="gzh-list-name">公众号名称：</div>
                <div class="div-line-input">
                    <span class="gzh-txt" id="gzhName"></span>
                </div>
            </div>
            <div class="div-input-blcok">
                <div class="gzh-list-name">公众号类型：</div>
                <div class="div-line-input">
                    <span class="gzh-txt">通用账号</span>
                </div>
            </div>
            <div class="div-input-blcok">
                <div class="gzh-list-name">公众号状态：</div>
                <div class="div-line-input">
                    <span class="gzh-txt" id="status"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="wrap-container clearfix showAccountType2">
    <div class="gzh-details-ctn">
        <div class="gzh-menu-top">公众号信息<span class="editbtn" id="editbtn" style="display: none">编辑</span></div>
        <div class="gzh-menu-tip">当您的公众号信息发生变更时，请及时更改当前绑定的公众号信息</div>
        <div class="gzh-list-txt layui-form">
            <div class="div-input-blcok">
                <div class="gzh-list-name">公众号名称：</div>
                <div class="div-line-input">
                    <span class="gzh-txt showData" id="gzhName0"></span>
                    <input class="gzh-input editData" id="gzhName1" lay-verify="required" type="text" value="" placeholder="请输入公众号名称">
                </div>
            </div>
            <div class="div-input-blcok">
                <div class="gzh-list-name">公众号类型：</div>
                <div class="div-line-input">
                    <span class="gzh-txt showData" id="accountType0">个人账号</span>
                    <div class="layui-form-item editData" style="width:442px; margin-left:0;margin-top:7px;padding-top: 10px">
                        <div class="layui-input-block" style="margin-left: 0!important">
                            <select name="accountType1" id="accountType1" lay-verify="required">
                                <option value="2" selected>个人账号</option>
                            </select></div>
                    </div>
                </div>
            </div>
            <div class="div-input-blcok">
                <div class="gzh-list-name">AppId：</div>
                <div class="div-line-input">
                    <span class="gzh-txt showData" id="appID0"></span>
                    <input class="gzh-input editData" id="appID1" lay-verify="required" type="text" value="" placeholder="请输入AppId">
                </div>
            </div>
            <div class="div-input-blcok">
                <div class="gzh-list-name">Secret：</div>
                <div class="div-line-input">
                    <span class="gzh-txt showData" id="secret0"></span>
                    <input class="gzh-input editData" id="secret1" lay-verify="required" type="text" value="" placeholder="请输入Secret">
                </div>
            </div>
            <div class="div-input-blcok">
                <div class="gzh-list-name">支付秘钥：</div>
                <div class="div-line-input">
                    <span class="gzh-txt showData" id="payKey0"></span>
                    <input class="gzh-input editData" id="payKey1" lay-verify="required" type="text" value="" placeholder="请输入支付秘钥">
                </div>
            </div>
            <div class="div-input-blcok accountType">
                <div class="gzh-list-name">商户号：</div>
                <div class="div-line-input">
                    <span class="gzh-txt showData" id="shNum0"></span>
                    <input class="gzh-input editData" id="shNum1" lay-verify="required" type="text" value="" placeholder="请输入商户号">
                </div>
            </div>
            <div class="div-input-blcok">
                <div class="gzh-list-name">公众号状态：</div>
                <div class="div-line-input">
                    <span class="gzh-txt showData" id="status0"></span>
                    <div class="layui-form-item editData" style="width:442px; margin-left:0;margin-top:7px;padding-top: 10px">
                        <div class="layui-input-block" style="margin-left: 0!important">
                            <select name="status1" id="status1" lay-verify="required"></select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gzh-btn-bot editData">
            <div class="gzh-btn-save">保存</div>
        </div>
    </div>
</div>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['jquery', 'page', 'dialog', 'baseutil'], function () {
        var $ = layui.jquery,
            page = layui.page,
            dialog = layui.dialog,
            baseutil = layui.baseutil;

        var id = '';
        baseutil.AjaxPostMark('/wx/wxaccount/list', {}, function (data) {
            if (data != null && data.length === 1) {
                initData(data[0]);
            } else {
                initData();
            }
        });

        function initData(data) {
            page.initDict('base_status', function (dictData) {
                if (isBlank(data)) {
                    $('.showAccountType2').show();
                    $("#editbtn").show();
                    $('.showData').show();
                    $("#gzhName0").html('');
                    $("#appID0").html('');
                    $("#secret0").html('');
                    $("#payKey0").html('');
                    $("#shNum0").html('');
                    $("#status0").html('');
                    $("#gzhName1").val('');
                    $("#accountType1").val(2);
                    $("#appID1").val('');
                    $("#secret1").val('');
                    $("#payKey1").val('');
                    $("#shNum1").val('');
                    page.showDict($("#status1"), page.aceeptDictContentList(dictData, 'base_status'), "", "1");
                } else {
                    id = data.id;
                    if (data.accountType === '1') {
                        $('.showAccountType1').show();
                        $("#gzhName").html(data.name);
                        $("#status").html(page.aceeptDictContentName(dictData, 'base_status', data.status));
                    } else {
                        $('.showAccountType2').show();
                        $("#editbtn").show();
                        $('.showData').show();
                        $("#gzhName0").html(data.name);
                        $("#appID0").html(data.appId);
                        $("#secret0").html(data.appSecret);
                        $("#payKey0").html(data.payKey);
                        $("#shNum0").html(data.payMachId);
                        $("#status0").html(page.aceeptDictContentName(dictData, 'base_status', data.status));
                        $("#gzhName1").val(data.name);
                        $("#appID1").val(data.appId).attr("readonly", "readonly");
                        $("#secret1").val(data.appSecret);
                        $("#payKey1").val(data.payKey);
                        $("#shNum1").val(data.payMachId);
                        page.showDict($("#status1"), page.aceeptDictContentList(dictData, 'base_status'), "请选择", data.status);
                    }
                }
            });
        }

        $("#editbtn").bind("click", function () {
            $('.showData').hide();
            $('.editData').show();
            $("#editbtn").hide();
        });

        $(".gzh-btn-save").bind("click", function () {
            $("#gzhName").html($("#gzhName1").val());
            $("#accountType").html($("#accountType1").find('option:selected')[0].innerHTML);
            $("#appID").html($("#appID1").val());
            $("#secret").html($("#secret1").val());
            $("#payKey").html($("#payKey1").val());
            $("#shNum").html($("#shNum1").val());
            $("#status").html($("#status1").find('option:selected')[0].innerHTML);
            var data = {
                id: id,
                accountType: $('#accountType1').val(),
                name: $('#gzhName1').val(),
                appId: $('#appID1').val(),
                appSecret: $('#secret1').val(),
                status: $('#status1').val(),
                payKey: $('#payKey1').val(),
                payMachId: $('#shNum1').val()
            };
            if (isBlank(data.name)) {
                dialog.msg("公众号名称不能为空");
                return false;
            }
            if (isBlank(data.appId)) {
                dialog.msg("AppId不能为空");
                return false;
            }
            if (isBlank(data.appSecret)) {
                dialog.msg("Secret不能为空");
                return false;
            }
            if (isBlank(data.payKey)) {
                dialog.msg("支付秘钥不能为空");
                return false;
            }
            if (isBlank(data.payMachId)) {
                dialog.msg("商户号不能为空");
                return false;
            }
            baseutil.AjaxPostMark("/wx/wxaccount/addOrUpdate", data, function () {
                window.location.reload();
            });
        });
    });
</script>
</body>
</html>